<template>
  <div>
    <h2>生命周期演示组件</h2>
    <p>组件加载时间：{{ loadedTime }} 秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadedTime: 0,
      showContent: true,
      timer: null
    };
  },
  beforeCreate() {
    console.log("🚀 beforeCreate: 实例初始化完成，但数据和方法还未初始化");
  },
  created() {
    console.log("✅ created: 数据已加载，可以开始调用接口或初始化数据");
    // 模拟异步请求
    setTimeout(() => {
      console.log("模拟 API 请求完成");
    }, 1000);
  },
  beforeMount() {
    console.log("🧭 beforeMount: 模板编译完成，但尚未挂载到 DOM");
  },
  mounted() {
    console.log("🎉 mounted: 组件已渲染到页面，可以操作 DOM 或启动定时器");
    this.timer = setInterval(() => {
      this.loadedTime += 1;
    }, 1000);
  },
  beforeUpdate() {
    console.log("🔄 beforeUpdate: 数据即将更新，DOM 还未更新");
  },
  updated() {
    console.log("✅ updated: 数据和 DOM 已同步更新");
  },
  beforeUnmount() {
    console.log("🛑 beforeUnmount: 组件即将销毁，清理定时器、事件监听等资源");
    clearInterval(this.timer);
  },
  unmounted() {
    console.log("👋 unmounted: 组件已销毁，所有绑定解除");
  }
};
</script>